<template>
  <div>
    <section class="header text-center">
      <nav class="navbar navbar-expand-lg navbar-light navbar-custom">
        <div>
          <Affix :offset-top="70" @change="onchange1"
            ><button class="h-btn" :class="{ 'h-btn-green': status.fixed1 }">
              <DropdownMenu
                :datas="param"
                trigger="hover"
                class-name="h-text-dropdown"
              >
                <span>商品排行榜</span>
              </DropdownMenu>
            </button></Affix
          >
        </div>
        <div class="container">
          <a class="navbar-brand" href="/"
            ><i class="fas fa-shopping-bag primary-color mr-1"></i
            >{{ $t("m.name") }}</a
          >
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbar-1"
            aria-controls="navbar-1"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse pull-xs-right justify-content-end"
            id="navbar-1"
          >
            <ul class="navbar-nav mt-2 mt-md-0">
              <li class="nav-item active">
                <a class="nav-link" href="/"
                  >{{ $t("m.Home") }}<span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item dropdown mega-menu">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Shop
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <div class="container">
                    <div class="divider"></div>
                    <div class="row">
                      <div class="col-md-2">
                        <h6 class="text-uppercase">Women's</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link active" href="#">Active</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                        </ul>
                      </div>
                      <div class="col-md-2">
                        <h6 class="text-uppercase">Men's</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                        </ul>
                      </div>
                      <div class="col-md-2">
                        <h6 class="text-uppercase">Girl's</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                        </ul>
                      </div>
                      <div class="col-md-2">
                        <h6 class="text-uppercase">Boy's</h6>
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Link item</a>
                          </li>
                        </ul>
                      </div>
                      <div class="col-md-4">
                        <h6 class="text-uppercase">Featured Items</h6>
                        <div class="row">
                          <div class="col-6 text-center">
                            <a href="item.html">
                              <img
                                src="images/placeholder-product.jpg"
                                alt=""
                                class="img-fluid mt-2 mb-3"
                            /></a>

                            <h6 class="mb-0">
                              <a href="item.html">Product Name</a>
                            </h6>
                            <p><span class="emphasis">$49.00</span></p>
                            <a
                              href="#"
                              class="btn btn-sm btn-outline-secondary mt-0"
                              >Buy Now</a
                            >
                          </div>
                          <div class="col-6 text-center">
                            <a href="item.html">
                              <img
                                src="images/placeholder-product.jpg"
                                alt=""
                                class="img-fluid mt-2 mb-3"
                            /></a>

                            <h6 class="mb-0">
                              <a href="item.html">Product Name</a>
                            </h6>
                            <p><span class="emphasis">$49.00</span></p>
                            <a
                              href="#"
                              class="btn btn-sm btn-outline-secondary mt-0"
                              >Buy Now</a
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Pages
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="index.html">Homepage</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="catalog.html">Catalog</a>
                  <a class="dropdown-item" href="item.html">Item Detail</a>
                  <a class="dropdown-item" href="cart.html">Cart</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="contact.html">Contact</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/myprofile">{{
                  $t("m.myprofile")
                }}</a>
              </li>
              <li class="nav-item dropdown">
                <!-- 检索功能 -->
                <AutoComplete
                  :option="params"
                  v-model="value"
                  @change="onChange"
                  @search="search"
                  type="title"
                  placeholder="搜索商品"
                  :mustMatch="false"
                ></AutoComplete>
              </li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  target="_blank"
                  href="/cart"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  ><i class="fas fa-shopping-cart"></i>
                  <span class="badge badge-pill badge-primary">{{
                    totalcount
                  }}</span></a
                >
                <div
                  class="dropdown-menu dropdown-menu-right dropdown-cart"
                  aria-labelledby="navbarDropdown"
                >
                  <h6>
                    {{ totalcount }}件商品&nbsp;&nbsp;&nbsp;<span
                      class="emphasis"
                      >${{ totalprice }}</span
                    >
                  </h6>
                  <div class="dropdown-divider"></div>
                  <ul class="shopping-cart-items">
                    <li
                      class="row"
                      v-for="(item, index) in cartlist"
                      :key="index"
                    >
                      <div class="col-3">
                        <img
                          :src="
                            'http://localhost:8000/static/upload/' + item.img
                          "
                          width="60"
                        />
                      </div>
                      <div class="col-9">
                        <h6>
                          <a href="item.html">{{ item.name }}</a>
                        </h6>
                        <span class="text-muted">{{ item.num }}*</span>
                        <span class="emphasis">${{ item.price }}</span>
                      </div>
                    </li>
                  </ul>

                  <a
                    href="cart.html"
                    class="btn btn-lg btn-full-width btn-primary"
                    style="margin: 0;"
                    >View Cart</a
                  >
                </div>
              </li>
            </ul>
            <!-- 用户名或登录注册 -->
            <div v-if="username == ''">
              <router-link to="/login">{{ $t("m.login") }}</router-link>
              /
              <router-link to="/reg">{{ $t("m.register") }}</router-link>
            </div>
            <div v-else>
              <a href="/myprofile">{{ username }}</a
              >&nbsp;&nbsp;
              <a href="/update_pass">{{ $t("m.update_password") }}</a>
              &nbsp;&nbsp;
              <a href="#" @click="logout">{{ $t("m.logout") }}</a>
              &nbsp;&nbsp;
              <a href="/picslist" v-if="type == 1">幻灯片列表</a>
              &nbsp;&nbsp;
              <a href="/addgoods" v-if="type == 1">添加商品</a>
              &nbsp;&nbsp;
            </div>
          </div>
        </div>
        <!-- 国际化语言选择 -->
        <div>
          <select v-model="select" @change="select_lang(select)">
            <option value="">{{ $t("m.select_lang") }}</option>
            <option key="Chinese" value="1">{{ $t("m.Chinese") }}</option>
            <option key="English" value="2">{{ $t("m.English") }}</option>
          </select>
        </div>
      </nav>
    </section>
  </div>
</template>

<script>
import { config } from "../config";
import jsonp from "fetch-jsonp";
const loadData = function(filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then(d => {
      callback(
        d.result.map(r => {
          return r[0];
        })
      );
    });
};
// import i18n from "../main.js";
export default {
  inject: ["reload"],
  name: "myheader",
  data: function() {
    return {
      username: "",
      select: "",
      // 用户类型
      type: "",
      // 商品排行榜
      param: [],
      status: {
        fixed1: false
      },
      // 智能提示控件
      value: "",
      params: {
        orgId: 1, // 自定义参数传递
        loadData,
        minWord: 1
      },
      // 购物车列表
      cartlist: [],
      // 购物车总数
      totalcount: "",
      // 购物车总价
      totalprice: ""
    };
  },
  // 定义接收参数
  // props: ["totalcount", "totalprice"],
  mounted: function() {
    // 新浪微博登录
    var sina_id = this.$route.query.sina_id;
    var uid = this.$route.query.uid;
    var token = this.$route.query.token;
    var type = this.$route.query.type;
    if (sina_id) {
      // 向localStorage中存入username和uid
      localStorage.setItem("username", sina_id);
      localStorage.setItem("uid", uid);
      localStorage.setItem("token", token);
      localStorage.setItem("type", type);
    }

    // 钉钉登录
    var uname = this.$route.query.uname;
    // var uid = this.$route.query.uid;
    if (uname) {
      // 向localStorage中存入username和uid
      localStorage.setItem("username", uname);
      localStorage.setItem("uid", uid);
      localStorage.setItem("token", token);
      localStorage.setItem("type", type);
    }

    // 判断用户是否登录
    if (localStorage.getItem("username")) {
      // 给用户名赋值;
      this.username = localStorage.getItem("username");
    }

    // 语言赋值
    if (localStorage.getItem("lang")) {
      this.$i18n.locale = localStorage.getItem("lang");
    } else {
      if (navigator.language == "zh-CN") {
        this.$i18n.lacale = "cn";
      }
      if (navigator.language == "en") {
        this.$i18n.lacale = "en";
      }
    }
    // 用户类型赋值
    this.type = localStorage.getItem("type");
    // 获取排行榜
    this.gettop();
    // 获取购物车列表
    // this.cartlist = JSON.parse(localStorage.getItem("cart"));
    this.cartlist = config.cartlist;
    // 商品总数
    if (this.cartlist) {
      this.totalcount = config.cartlist.length;
      // 商品总价
      this.get_totalprice();
    } else {
      this.totalcount = 0;
      this.totalprice = 0;
    }
  },
  methods: {
    // 登出
    logout: function() {
      // 删除localStorage中的用户信息
      localStorage.removeItem("username");
      localStorage.removeItem("filename");
      localStorage.removeItem("Qiniu_src");
      localStorage.removeItem("videoname");
      // 跳转到登陆界面
      this.$router.push("/login");
    },
    // 语言切换
    select_lang: function(key) {
      var lang = key;
      if (lang == "1") {
        this.$i18n["locale"] = "zh";
        localStorage.setItem("lang", "zh");
      }
      if (lang == "2") {
        this.$i18n["locale"] = "en";
        localStorage.setItem("lang", "en");
      }
    },
    // 搜索商品
    search() {
      if (this.inputname) {
        this.$router.push({
          path: "/search",
          query: { word: this.inputname }
        });
      } else {
        this.$Message("请输入商品名称");
      }
    },
    // 图钉事件
    onchange1(fixed) {
      this.status.fixed1 = fixed;
    },
    // 获取商品排行榜
    gettop: function() {
      this.axios({
        url: "http://localhost:8000/productviewtimes/"
      }).then(res => {
        this.param = res.data.data;
      });
    },
    onChange(data, trigger) {
      if (this.value) {
        this.$router.push({
          path: "/search",
          query: { word: this.value }
        });
      } else {
        this.$Message("请输入商品名称");
      }
    },
    // 计算购物车总价
    get_totalprice: function() {
      var total = 0;
      for (let i = 0, l = this.cartlist.length; i < l; i++) {
        total += this.cartlist[i].num * this.cartlist[i].price;
      }
      this.totalprice = total;
    }
  }
};
</script>
<style>
</style>